<template>
  <el-dialog
    title="发布动态"
    :visible.sync="dialogVisible"
    width="600px"
    :modal-append-to-body="false"
    :append-to-body="false"
    @close="handleClose">
    <div class="publish-content">
      <el-input
        type="textarea"
        v-model="content"
        :rows="4"
        placeholder="分享新鲜事...">
      </el-input>
      
      <div class="image-uploader">
        <file-upload
          ref="upload"
          :action="'/image/upload'"
          :maxSize="5 * 1024 * 1024"
          :fileTypes="['image/jpeg', 'image/png', 'image/jpg']"
          @success="onImageSuccess"
          @fail="onImageFail">
          <div class="upload-btn">
            <i class="el-icon-plus"></i>
            <div class="upload-text">上传图片</div>
          </div>
        </file-upload>
        
        <div class="image-preview" v-if="images.length">
          <div v-for="(img, index) in images" :key="index" class="preview-item">
            <img :src="img">
            <i class="el-icon-delete" @click="removeImage(index)"></i>
          </div>
        </div>
      </div>
    </div>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handlePublish">发 布</el-button>
    </span>
  </el-dialog>
</template>

<script>
import FileUpload from '../common/FileUpload.vue'

export default {
  name: 'PublishMoment',
  components: {
    FileUpload
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      content: '',
      images: [],
      dialogVisible: false
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
    }
  },
  methods: {
    handleClose() {
      this.content = ''
      this.images = []
      this.$emit('close')
    },
    handlePublish() {
      if (!this.content.trim()) {
        this.$message.warning('请输入内容')
        return
      }
      this.$emit('success', {
        content: this.content,
        images: this.images
      })
      this.handleClose()
    },
    onImageSuccess(res) {
      this.images.push(res.url)
    },
    onImageFail() {
      this.$message.error('图片上传失败')
    },
    removeImage(index) {
      this.images.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.publish-content {
  .image-uploader {
    margin-top: 20px;
    
    .upload-btn {
      width: 100px;
      height: 100px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      
      &:hover {
        border-color: var(--theme-color);
      }
      
      i {
        font-size: 28px;
        color: #8c939d;
      }
      
      .upload-text {
        font-size: 12px;
        color: #666;
        margin-top: 8px;
      }
    }
    
    .image-preview {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      
      .preview-item {
        position: relative;
        width: 100px;
        height: 100px;
        margin-right: 8px;
        margin-bottom: 8px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 4px;
        }
        
        .el-icon-delete {
          position: absolute;
          right: -6px;
          top: -6px;
          color: #f56c6c;
          background: #fff;
          border-radius: 50%;
          padding: 2px;
          cursor: pointer;
          
          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }
  }
}
</style> 